<h1><code ng:non-bindable=""></code>
    <span class="hint"></span>
</h1>
<div><a href="http://github.com/angular/angular.js/edit/master/docs/content/cookbook/form.ngdoc"
        class="improve-docs btn btn-primary">Improve this doc</a>

    <div class="cookbook-page cookbook-form-page"><p>A web application's main purpose is to present and gather data. For
        this reason Angular strives
        to make both of these operations trivial. This example shows off how you can build a simple form to
        allow a user to enter data.</p>

        <h3>Source</h3>

        <div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-7" source-edit-css=""
             source-edit-js="script.js-6" source-edit-unit="" source-edit-scenario="scenario.js-8"></div>
        <div class="tabbable">
            <div class="tab-pane" title="index.html">
                <pre class="prettyprint linenums" ng-set-text="index.html-7" ng-html-wrap=" angular.js script.js"></pre>
                <script type="text/ng-template" id="index.html-7">

                    <div ng-controller="FormController" class="example">

                        <label>Name:</label><br>
                        <input type="text" ng-model="user.name" required/> <br><br>

                        <label>Address:</label><br>
                        <input type="text" ng-model="user.address.line1" size="33" required> <br>
                        <input type="text" ng-model="user.address.city" size="12" required>,
                        <input type="text" ng-model="user.address.state"
                               ng-pattern="state" size="2" required>
                        <input type="text" ng-model="user.address.zip" size="5"
                               ng-pattern="zip" required><br><br>

                        <label>Phone:</label>
                        [ <a href="" ng-click="addContact()">add</a> ]
                        <div ng-repeat="contact in user.contacts">
                            <select ng-model="contact.type">
                                <option>email</option>
                                <option>phone</option>
                                <option>pager</option>
                                <option>IM</option>
                            </select>
                            <input type="text" ng-model="contact.value" required>
                            [ <a href="" ng-click="removeContact(contact)">X</a> ]
                        </div>
                        <hr/>
                        Debug View:
                        <pre>user={{user | json}}</pre>
                    </div>

                </script>
            </div>
            <div class="tab-pane" title="script.js">
                <pre class="prettyprint linenums" ng-set-text="script.js-6"></pre>
                <script type="text/ng-template" id="script.js-6">
                    function FormController($scope) {
                    var user = $scope.user = {
                    name: 'John Smith',
                    address:{line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345'},
                    contacts:[{type:'phone', value:'1(234) 555-1212'}]
                    };
                    $scope.state = /^\w\w$/;
                    $scope.zip = /^\d\d\d\d\d$/;

                    $scope.addContact = function() {
                    user.contacts.push({type:'email', value:''});
                    };

                    $scope.removeContact = function(contact) {
                    for (var i = 0, ii = user.contacts.length; i < ii; i++) {
                    if (contact === user.contacts[i]) {
                    $scope.user.contacts.splice(i, 1);
                    }
                    }
                    };
                    }
                </script>
            </div>
            <div class="tab-pane" title="End to end test">
                <pre class="prettyprint linenums" ng-set-text="scenario.js-8"></pre>
                <script type="text/ng-template" id="scenario.js-8">
                    it('should show debug', function() {
                    expect(binding('user')).toMatch(/John Smith/);
                    });
                    it('should add contact', function() {
                    using('.example').element('a:contains(add)').click();
                    using('.example div:last').input('contact.value').enter('you@example.org');
                    expect(binding('user')).toMatch(/\(234\) 555\-1212/);
                    expect(binding('user')).toMatch(/you@example.org/);
                    });

                    it('should remove contact', function() {
                    using('.example').element('a:contains(X)').click();
                    expect(binding('user')).not().toMatch(/\(234\) 555\-1212/);
                    });

                    it('should validate zip', function() {
                    expect(using('.example').
                    element(':input[ng\\:model="user.address.zip"]').
                    prop('className')).not().toMatch(/ng-invalid/);
                    using('.example').input('user.address.zip').enter('abc');
                    expect(using('.example').
                    element(':input[ng\\:model="user.address.zip"]').
                    prop('className')).toMatch(/ng-invalid/);
                    });

                    it('should validate state', function() {
                    expect(using('.example').element(':input[ng\\:model="user.address.state"]').prop('className'))
                    .not().toMatch(/ng-invalid/);
                    using('.example').input('user.address.state').enter('XXX');
                    expect(using('.example').element(':input[ng\\:model="user.address.state"]').prop('className'))
                    .toMatch(/ng-invalid/);
                    });
                </script>
            </div>
        </div>
        <h3>Demo</h3>

        <div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-7"
             ng-eval-javascript="script.js-6"></div>

        <h1 id="thingstonotice">Things to notice</h2>

            <ul>
                <li>The user data model is initialized <a
                        href="api/ng.directive:ngController"><code>controller</code></a> and is
                    available in the <a href="api/ng.$rootScope.Scope"><code>scope</code></a> with the initial data.
                </li>
                <li>For debugging purposes we have included a debug view of the model to better understand what
                    is going on.
                </li>
                <li>The <a href="api/ng.directive:input"><code>input directives</code></a> simply refer
                    to the model and are data-bound.
                </li>
                <li>The inputs validate. (Try leaving them blank or entering non digits in the zip field)</li>
                <li>In your application you can simply read from or write to the model and the form will be updated.
                </li>
                <li>By clicking the 'add' link you are adding new items into the <code>user.contacts</code> array which
                    are then
                    reflected in the view.
                </li>
            </ul>
    </div>
</div>
